<template>
    <div class="page-card">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="appid" prop="appid" required>
                <el-input v-model="form.appid" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="secret" prop="secret" required>
                <el-input v-model="form.secret" style="width: 500px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import http from "@/utils/request";
import { ElMessage } from 'element-plus';

const form = reactive({
    key: 'miniapp',
    appid: '',
    secret: ''
})

const formRef = ref(null)

const rules = reactive({
    appid: [{ required: true, message: '请填写appid', trigger: 'blur' }],
    secret: [{ required: true, message: '请填写secret', trigger: 'blur' }],
})

onMounted(() => {
    getMiniappInfo();
})

function getMiniappInfo() {
    http.get('/admin/system/info', {
        keyword: 'miniapp'
    }).then(res => {
        form.appid = res.result.appid;
        form.secret = res.result.secret;
    })
}

function onSubmit(formEl) {
    formEl.validate((valid) => {
        if (valid) {
            http.post('/admin/system/save', form).then(res => {
                if (res.code == 200) {
                    ElMessage.success("保存成功");
                }
            })
        } else {
            return false
        }
    })
}
</script>
<style>

</style>